// pages/test2/test2.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        UserInfo: {},
        videoName: '',//标题
        videoCover: '',//封面
        headPortrait: '',
        shareImgSrc: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var _this = this;
        var UserInfo = wx.getStorageSync('UserInfo');
        _this.setData({
            UserInfo: UserInfo,
            videoName: options.videoName,
            videoCover:'https://www.iyousi.club/staticimg/2018-11-27/1543299731231.jpg'
        })
        wx.downloadFile({
            url: _this.data.videoCover, //仅为示例，并非真实的资源
            success: function (res) {
                // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                if (res.statusCode === 200) {
                    console.log(res.tempFilePath)
                    _this.setData({
                        videoCover: res.tempFilePath
                    })
                }
            }
        })
        wx.downloadFile({
            url: _this.data.UserInfo.avatarUrl, //仅为示例，并非真实的资源
            success: function (res) {
                // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                if (res.statusCode === 200) {
                    _this.setData({
                        headPortrait: res.tempFilePath
                    })
                    setTimeout(function () {

                        _this.createCanvas();
                    }, 600)
                }
            }
        })
    },

    createCanvas: function () {
        var _this = this;

        //2. canvas绘制文字和图片
        const ctx = wx.createCanvasContext('myCanvas');
        var imgPath = _this.data.videoCover;//封面
        var bgImgPath = _this.data.headPortrait;
        ctx.setFillStyle('#ffffff')
        ctx.fillRect(0, 0, 275, 400); //画一个长275宽400的矩形
        ctx.drawImage(imgPath, -2, 0, 277, 225);//画封面
        //绘制用户名
        ctx.setFontSize(10)
        ctx.setFillStyle('#6F6F6F')
        ctx.fillText(_this.data.UserInfo.nickName, 70, 295)

        // ctx.setFontSize(12)
        // ctx.setFillStyle('#101010')
        // ctx.fillText('宠友们快来围观萌宠靓照', 15, 330)
        // ctx.fillText('我在萌爪幼稚园', 15, 348)

        ctx.setFontSize(10)
        ctx.setFillStyle('#555555')
        ctx.fillText('长按扫码查看详情', 15, 380);




        var text = _this.data.videoName; //这是要绘制的文本
        var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
        var temp = "";
        var row = [];
        ctx.setFontSize(12)
        ctx.setFillStyle("#101010")
        for (var a = 0; a < chr.length; a++) {
            if (ctx.measureText(temp).width < 130) {
                temp += chr[a];
            } else {
                a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
                row.push(temp);
                temp = "";
            }
        }
        row.push(temp);

        //如果数组长度大于2 则截取前两个
        if (row.length > 2) {
            var rowCut = row.slice(0, 2);
            var rowPart = rowCut[1];
            var test = "";
            var empty = [];
            for (var a = 0; a < rowPart.length; a++) {
                if (ctx.measureText(test).width < 220) {
                    test += rowPart[a];
                } else {
                    break;
                }
            }
            empty.push(test);
            var group = empty[0] + "..." //这里只显示两行，超出的用...表示
            rowCut.splice(1, 1, group);
            row = rowCut;
        }
        for (var b = 0; b < row.length; b++) {
            ctx.fillText(row[b], 15, 330 + b * 18)
        }





















        ctx.drawImage('/imgse/qrcode.jpg', 180, 300, 90, 90);
        //绘制头像
        ctx.arc(40, 285, 25, 0, 2 * Math.PI) //画出圆
        ctx.setFillStyle('#ffffff');
        ctx.fill();
        ctx.clip(); //裁剪上面的圆形
        ctx.drawImage(bgImgPath, 15, 260, 50, 50); // 在刚刚裁剪的园上画图
        ctx.draw()
        setTimeout(function () {
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 600,
                height: 800,
                destWidth: 600,
                destHeight: 800,
                canvasId: 'myCanvas',
                success: function (res) {
                    _this.setData({
                        shareImgSrc: res.tempFilePath
                    })

                },
                fail: function (res) {
                    console.log(res)
                }
            })
        }, 1000)
    },
    saveImageAlbum: function () {
        var _this = this;
        wx.saveImageToPhotosAlbum({
            filePath: _this.data.shareImgSrc,
            success(res) {
                wx.showModal({
                    title: '存图成功',
                    content: '图片成功保存到相册了，去发圈噻~',
                    showCancel: false,
                    confirmText: '好哒',
                    confirmColor: '#72B9C3',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        }
                    }
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {


    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})